<template>
<div class="juheh5-pay">
    <div class="account-header">
        <div class="back-icon" @click="close">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
            </svg>
        </div>
        <!-- 选择支付方式 -->
    </div>
    <div class="account-content">
        <div class="pay-content">
            <div class="order-info">
                <div class="order-amount">￥<label class="amount">{{ amount }}</label></div>
            </div>
            <div class="pay-type-box">
                <div v-if="canYibaoPay" class="type-item" v-on:click="weixinYibaoPay()">
                    <div class="wxpay-icon">
                        <svg t="1691651773705" class="icon" viewBox="0 0 1228 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="3994">
                            <path
                                d="M530.8928 703.1296a41.472 41.472 0 0 1-35.7376-19.8144l-2.7136-5.5808L278.272 394.752a18.7392 18.7392 0 0 1-2.048-8.1408 19.968 19.968 0 0 1 20.48-19.3536c4.608 0 8.8576 1.4336 12.288 3.84l234.3936 139.9296a64.4096 64.4096 0 0 0 54.528 5.9392L1116.2624 204.8C1004.9536 80.896 821.76 0 614.4 0 275.0464 0 0 216.576 0 483.6352c0 145.7152 82.7392 276.8896 212.2752 365.5168a38.1952 38.1952 0 0 1 17.2032 31.488 44.4928 44.4928 0 0 1-2.1504 12.3904l-27.6992 97.4848c-1.3312 4.608-3.328 9.3696-3.328 14.1312 0 10.752 9.216 19.3536 20.48 19.3536 4.4032 0 8.0384-1.536 11.776-3.584l134.5536-73.3184c10.1376-5.5296 20.7872-8.96 32.6144-8.96 6.2976 0 12.288 0.9216 18.0736 2.5088 62.72 17.0496 130.4576 26.5728 200.5504 26.5728C953.7024 967.168 1228.8 750.592 1228.8 483.6352c0-80.9472-25.4464-157.1328-70.0416-224.1024l-604.9792 436.992-4.4544 2.4064a42.1376 42.1376 0 0 1-18.432 4.1984z"
                                fill="#15BA11" p-id="3995"></path>
                        </svg>
                    </div>
                    <div class="item-text">易宝</div>
                </div>
                <div v-if="canWeixinPay" class="type-item" v-on:click="weixinH5Pay()">
                    <div class="wxpay-icon">
                        <svg t="1691651773705" class="icon" viewBox="0 0 1228 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="3994">
                            <path
                                d="M530.8928 703.1296a41.472 41.472 0 0 1-35.7376-19.8144l-2.7136-5.5808L278.272 394.752a18.7392 18.7392 0 0 1-2.048-8.1408 19.968 19.968 0 0 1 20.48-19.3536c4.608 0 8.8576 1.4336 12.288 3.84l234.3936 139.9296a64.4096 64.4096 0 0 0 54.528 5.9392L1116.2624 204.8C1004.9536 80.896 821.76 0 614.4 0 275.0464 0 0 216.576 0 483.6352c0 145.7152 82.7392 276.8896 212.2752 365.5168a38.1952 38.1952 0 0 1 17.2032 31.488 44.4928 44.4928 0 0 1-2.1504 12.3904l-27.6992 97.4848c-1.3312 4.608-3.328 9.3696-3.328 14.1312 0 10.752 9.216 19.3536 20.48 19.3536 4.4032 0 8.0384-1.536 11.776-3.584l134.5536-73.3184c10.1376-5.5296 20.7872-8.96 32.6144-8.96 6.2976 0 12.288 0.9216 18.0736 2.5088 62.72 17.0496 130.4576 26.5728 200.5504 26.5728C953.7024 967.168 1228.8 750.592 1228.8 483.6352c0-80.9472-25.4464-157.1328-70.0416-224.1024l-604.9792 436.992-4.4544 2.4064a42.1376 42.1376 0 0 1-18.432 4.1984z"
                                fill="#15BA11" p-id="3995"></path>
                        </svg>
                    </div>
                    <div class="item-text">微信</div>
                </div>
                <div v-if="canAliPay" class="type-item" v-on:click="aliH5Pay()">
                    <div class="wxpay-icon">
                        <svg t="1711366773118" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4249">
                            <path d="M1024.0512 701.0304V196.864A196.9664 196.9664 0 0 0 827.136 0H196.864A196.9664 196.9664 0 0 0 0 196.864v630.272A196.9152 196.9152 0 0 0 196.864 1024h630.272a197.12 197.12 0 0 0 193.8432-162.0992c-52.224-22.6304-278.528-120.32-396.4416-176.64-89.7024 108.6976-183.7056 173.9264-325.3248 173.9264s-236.1856-87.2448-224.8192-194.048c7.4752-70.0416 55.552-184.576 264.2944-164.9664 110.08 10.3424 160.4096 30.8736 250.1632 60.5184 23.1936-42.5984 42.496-89.4464 57.1392-139.264H248.064v-39.424h196.9152V311.1424H204.8V267.776h240.128V165.632s2.1504-15.9744 19.8144-15.9744h98.4576V267.776h256v43.4176h-256V381.952h208.8448a805.9904 805.9904 0 0 1-84.8384 212.6848c60.672 22.016 336.7936 106.3936 336.7936 106.3936zM283.5456 791.6032c-149.6576 0-173.312-94.464-165.376-133.9392 7.8336-39.3216 51.2-90.624 134.4-90.624 95.5904 0 181.248 24.4736 284.0576 74.5472-72.192 94.0032-160.9216 150.016-253.0816 150.016z" fill="#009FE8" p-id="4250"></path>
                        </svg>
                    </div>
                    <div class="item-text">支付宝</div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
export default {
    props: {
        modelValue: {
            type: Object,
            default: () => ({}),
        },
        orderParams: {
            type: Object,
            default: () => ({}),
        },
        isPhone: {
            type: Number,
            default: 0,
        },
        isWechat: {
            type: Number,
            default: 0,
        }
    },
    data() {
        var open_pay_list = this.getOpenPayList()
        return {
            myValue: this.modelValue,
            canYibaoPay: open_pay_list.yibao_pay,
            canWeixinPay: open_pay_list.wxh5_pay,
            canAliPay: open_pay_list.alih5_pay,
            checkTradeNo: '',
            checkTradeNoCount: 0,
            wexinH5PayUrl: ""
        };
    },
    watch: {
        modelValue: {
            deep: true,
            handler(newVal) {
                this.myValue = newVal;
            },
        },
        myValue: {
            deep: true,
            handler(newVal) {
                this.handleSyncData();
            },
        }
    },
    computed: {
        goodsName() {
            return this.orderParams.params.goods_name
        },
        tradeNo() {
            return this.orderParams.trade_no
        },
        amount() {
            return parseFloat(this.orderParams.params.money).toFixed(2)
        },
    },
    mounted() {
        //
    },
    methods: {
        handleSyncData() {
            this.$emit("update:modelValue", this.myValue);
        },
        getOpenPayList() {
            const _this = this

            var data = {
                wxh5_pay: _this.orderParams.sdk_info.open_pay_list.wxh5_pay,
                alih5_pay: _this.orderParams.sdk_info.open_pay_list.alih5_pay,
                yibao_pay: _this.orderParams.sdk_info.open_pay_list.yibao_pay,
            }

            return data
        },
        // 易宝微信支付
        weixinYibaoPay() {
            const _this = this

            var params = {
                trade_no: _this.tradeNo,
                pay_platform: 141,
            }

            http.post('/switch_pay/click_pay', params, function(code, msg, data) {
                if (code !== 0) {
                    layer.msg(msg)
                    return
                }

                // 监听订单状态
                _this.checkOrderStatusBegin(_this.tradeNo)

                // 如果在apk壳中，则请求壳唤起支付app
                if (window.XPH5) {
                    window.XPH5.pay(data.message)
                    return
                }

                // 如果是在手机浏览器、则直接唤起 wexin://
                if (_this.isPhone) {
                    if (data.message == '') {
                        layer.msg('获取微信支付链接失败，请稍后再试')
                    } else {
                        window.location.href = data.message
                    }
                    return
                }

                // 如果是在pc浏览器、pc微信，则唤起二维码
                if (!_this.isPhone) {
                    _this.myValue.payJumpQrcodeUrl = data.jump_qrcode_url
                    _this.myValue.currentComponent = 'PayQrcode';
                    return
                }
            }, true);
        },
        // 微信支付
        weixinH5Pay() {
            const _this = this

            var params = {
                trade_no: _this.tradeNo,
                pay_platform: 21,
                qrcode_pay: 0,
            }
            if (!window.XPH5 && !_this.isPhone) {
                params.qrcode_pay = 1
            }

            http.post('/switch_pay/click_pay', params, function(code, msg, data) {
                if (code !== 0) {
                    layer.msg(msg)
                    return
                }

                // 监听订单状态
                _this.checkOrderStatusBegin(_this.tradeNo)

                // 如果在apk壳中，则请求壳唤起支付app
                if (window.XPH5) {
                    window.XPH5.pay(data.message)
                    return
                }

                // 如果是在手机浏览器、则直接唤起 wexin://
                if (_this.isPhone) {
                    window.location.href = data.message
                    return
                }

                // 如果是在pc浏览器、pc微信，则唤起二维码
                if (!_this.isPhone) {
                    _this.myValue.payJumpQrcodeUrl = data.jump_qrcode_url
                    _this.myValue.currentComponent = 'PayQrcode';
                    return
                }
            }, true);
        },
        // 支付宝支付
        aliH5Pay() {
            const _this = this

            var params = {
                trade_no: _this.tradeNo,
                pay_platform: 11,
                qrcode_pay: 0,
            }
            if (!window.XPH5 && !_this.isPhone) {
                params.qrcode_pay = 1
            }

            http.post('/switch_pay/click_pay', params, function(code, msg, data) {
                if (code !== 0) {
                    layer.msg(msg)
                    return
                }

                // 监听订单状态
                _this.checkOrderStatusBegin(_this.tradeNo)

                // 如果在apk壳中，则请求壳唤起支付app
                if (window.XPH5) {
                    window.XPH5.pay(data.message)
                    return
                }

                // 如果是在手机浏览器、则直接唤起 wexin://
                if (_this.isPhone) {
                    window.location.href = data.message
                    return
                }

                // 如果是在pc浏览器、pc微信，则唤起二维码
                if (!_this.isPhone) {
                    _this.myValue.payJumpQrcodeUrl = data.jump_qrcode_url
                    _this.myValue.currentComponent = 'PayQrcode';
                    return
                }
            }, true);
        },
        close() {
            this.myValue.currentComponent = ''
        },
        checkOrderStatusBegin(trade_no) {
            const _this = this

            if (_this.checkTradeNo == trade_no) {
                _this.checkTradeNoCount = 0
                return
            }
            _this.checkTradeNo = trade_no
            _this.checkTradeNoCount = 0

            setTimeout(() => {
                _this.checkOrderStatus(trade_no)
            }, 3000);
        },
        checkOrderStatus(trade_no) {
            const _this = this

            // 如果当前订单与检测订单不一致
            if (_this.tradeNo != trade_no) {
                return
            }

            // 如果当前不处于此页面中
            if (this.myValue.currentComponent != 'Pay') {
                return
            }

            var params = {
                trade_no: trade_no,
            }
            var url = 'https://sdk-log.tkungame.com/api/sdk/order/info'
            http.post(url, params, function(code, msg, data) {
                if (code !== 0) {
                    return
                }
                // 如果已经支付成功则关闭页面
                if (data.status!=0 && data.status!=11) {
                    return _this.close()
                }

                // 等待下一次查询
                _this.checkTradeNoCount++
                if (_this.checkTradeNoCount < 60) {
                    setTimeout(() => {
                        _this.checkOrderStatus(trade_no)
                    }, 2000);
                }
            }, false);
        }
    },
};
</script>

<style lang="scss" scoped>
.account-content {
    width: 100% !important;
    margin: 0 !important;
}

</style>
